<template>
  <ElFormItemBox :label="item.label || item.title" :prop="item.key" :isRules="item.isRules"
    v-if="typeof item.hidden === 'function' ? !item.hidden(data) : !item.hidden">
    <template v-if="item.formType === 'text'">
      <ElInputBox :data="data" :dataName="item.key" v-bind="{
        type: 'text',
        ...item.bind
      }" :select="item.select" @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'number'">
      <ElNumberBox :data="data" :dataName="item.key" v-bind="item.bind" :select="item.select"
        @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'day'">
      <ElDayBox :data="data" :dataName="item.key" v-bind="item.bind" :select="item.select"
        @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'days'">
      <ElDaysBox :data="data" :dataName="item.key" v-bind="item.bind" :select="item.select"
        @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'upload'">
      <ElUploadBox :data="data" v-bind="item.bind" :fileFragmentation="item.fileFragmentation"
        :fileMerge="item.fileMerge" @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'textarea'">
      <ElInputBox :data="data" :dataName="item.key" v-bind="{
        type: 'textarea',
        autosize: { minRows: 3, maxRows: 10 },
        ...item.bind
      }" :select="item.select" @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'select'">
      <ElSelectBox :data="data" :dataName="item.key" v-bind="item.bind" :remote-method="(query: string) => {
        return item.remoteMethod && typeof item.remoteMethod ? item.remoteMethod(query, item) : false
      }" :options="item.options" :labelName="item.labelName" :valueName="item.valueName"
        :disabledName="item.disabledName" @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'radio'">
      <ElRadioBox :data="data" :dataName="item.key" v-bind="item.bind" :options="item.options"
        :labelName="item.labelName" :valueName="item.valueName" :disabledName="item.disabledName"
        @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'checkbox'">
      <ElCheckboxBox :data="data" :dataName="item.key" v-bind="item.bind" :options="item.options"
        :labelName="item.labelName" :valueName="item.valueName" :disabledName="item.disabledName"
        @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'switch'">
      <ElSwitchBox :data="data" :dataName="item.key" v-bind="item.bind" @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'rate'">
      <ElRateBox :data="data" :dataName="item.key" v-bind="item.bind" @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'treeSelect'">
      <ElTreeSelectBox :data="data" :dataName="item.key" v-bind="item.bind" :options="item.options"
        :labelName="item.labelName" :valueName="item.valueName" :childrenName="item.childrenName"
        :disabledName="item.disabledName" @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'color'">
      <ElColorBox :data="data" :dataName="item.key" v-bind="item.bind" @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'autocomplete'">
      <ElAutocompleteBox :data="data" :dataName="item.key" v-bind="item.bind" :searchBtn="item.searchBtn"
        :addBtn="item.addBtn" @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'progress'">
      <ElProgressBox :data="data" :dataName="item.key" v-bind="item.bind" @changeBtn="item.changeBtn" />
    </template>
    <template v-else-if="item.formType === 'slider'">
      <ElSliderBox :data="data" :dataName="item.key" v-bind="item.bind" @changeBtn="item.changeBtn" />
    </template>
    <template v-else>
      <div v-html="item.key ? data[item.key] : item" :style="{
        whiteSpace: 'pre-wrap',
        lineHeight: '1.68em',
        margin: '4px 0 0'
      }"></div>
    </template>
  </ElFormItemBox>
</template>
<script setup lang="ts">
//获取父级数据
const props = withDefaults(
  defineProps<{
    data?: any;
    item?: any;
    resetForm?: Function;
  }>(),
  {},
);
</script>
<style scoped></style>
